import React, { useEffect, useState } from 'react';
import {
  Button,
  Card,
  Form,
  Input,
  DatePicker,
  Space,
  Select,
  Table,
  message,
  Modal,
  Pagination
} from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import {
  repairsList,
  repairstate,
  repairsDel,
  repairsDelall,
  repairstype,
} from '../apis/repair';
import '../assets/css/questions/questions.css';
import '../assets/css/repair.css';
import Details from '../components/questions/details';

import repairsAdd from "../components/repairs/repairsAdd";

const { confirm } = Modal;
// 分页
var total = 0
const Repairs: React.FC = () => {
  // 删除
  const del = (id: number) => {
    confirm({
      title: 'Do you Want to delete these items?',
      icon: <ExclamationCircleOutlined />,
      content: '确定要删除这条数据吗',
      onOk: async () => {
        let res: any = await repairsDel({ id: id });
        console.log(res);
        if (res.errCode === 10000) {
          message.success('删除成功');
          getData();
        } else {
          message.error(res.errMsg);
        }
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };
  // 批删
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const dell = () => {
    confirm({
      title: 'Do you Want to delete these items?',
      icon: <ExclamationCircleOutlined />,
      content: '确定要删除此数据吗',
      onOk: async () => {
        let res: any = await repairsDelall({ ids: selectedRowKeys });
        console.log(res);
        if (res.errCode === 10000) {
          message.success('删除成功');
          getData();
        } else {
          message.error(res.errMsg);
        }
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };
  //详情
  const [open, setOpen] = useState(false);

  const showModal = () => {
    setOpen(true);
  };

  const handleCancel = () => {
    setOpen(false);
  };
  // 表格
  const columns: ColumnsType<any> = [
    {
      title: 'id',
      dataIndex: 'id',
      align: 'center',
    },
    {
      title: '问题类型',
      dataIndex: 'typename',
      key: 'typename',
      align: 'center',
      render: (_, record) => (
        <div className="parti">
          <div className="dan" onClick={showModal}>
            {record.typename}
          </div>
          <Modal width="650px" open={open} onCancel={handleCancel} footer={[]}>
            <Details getOpen={record}></Details>
          </Modal>
        </div>
      ),
    },
    {
      title: '问题地址',
      dataIndex: 'address',
      align: 'center',
    },
    {
      title: '问题描述',
      dataIndex: 'content',
      align: 'center',
    },
    {
      title: '处理状态',
      dataIndex: 'statename',
      align: 'center',
    },
    {
      title: '业主名称',
      dataIndex: 'username',
      align: 'center',
    },
    {
      title: '业主电话',
      dataIndex: 'tel',
      align: 'center',
    },
    {
      title: '维修日期',
      dataIndex: 'addtime',
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'id',
      align: 'center',
      render: (id: number) => (
        <div>
          <Button
            style={{
              background: '#67c23a',
              color: '#ffffff',
              marginRight: '5px',
            }}
          >
            修改
          </Button>
          <Button
            className="botton"
            type="primary"
            danger
            onClick={() => del(id)}
          >
            删除
          </Button>
        </div>
      ),
    },
  ];

  // 状态
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
  };
  const [states, setState] = useState<any>();
  const getStates = async () => {
    let res: any = await repairstate({}).catch(() => {});
    console.log(res);
    if (res && res.errCode === 10000) {
      setState(res.data.list);
    }
  };
  //类型
  const [types, setType] = useState<any>();
  const getTypes = async () => {
    let res: any = await repairstype({}).catch(() => {});
    // console.log(res);
    if (res && res.errCode === 10000) {
      setType(res.data.list);
    }
  };
  //查询
  interface Params {
    key: string; //关键字
    page: number; //页数
    psize: number; //条数
    tel: string; //电话
    address: string; //地址
    state: number; //状态
    type: number; //类型
    userid: any; //居民
  }
  const [params, setParams] = useState<Params>({
    key: '',
    page: 1,
    psize: 10,
    tel: '',
    address: '',
    state: states,
    type: types,
    userid: '',
  });
  const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
    setParams({ ...params, ...values });
    console.log(params);
  };
  //时间
  const { RangePicker } = DatePicker;
  // 列表
  const [list, setList] = useState<any>([]);
  const getData = async () => {
    let res: any = await repairsList(params).catch(() => {});
    console.log(res);
    if (res && res.errCode === 10000) {
      setList(res.data.list);
      total = res.data.counts
    }
  };
  // 分页
  const ange = (a: any, b: any) => {
    console.log(a, b);
    setParams({ ...params, page: a, psize: b })
  }
  //调用
  useEffect(() => {
    getData();
    getStates();
    getTypes();
  }, [params]);
  return (
    <div id="repairs">
      <div>
        <Card className="card" title={<a href="#">故障报修列表</a>}>
          <div className="top">
            <Form name="complex-form" onFinish={onFinish}>
              <div className="topTop">
                <Form.Item label="投诉标题" name="key">
                  <Input placeholder="投诉标题" />
                </Form.Item>
                <Form.Item label="地址" name="address">
                  <Input placeholder="地址" />
                </Form.Item>
                <Form.Item label="电话" name="tel">
                  <Input placeholder="电话" />
                </Form.Item>
                <Form.Item label="按时间查询">
                  <Space direction="vertical" size={12}>
                    <RangePicker />
                  </Space>
                </Form.Item>
                <Form.Item label="投诉状态" name="state">
                  <Select
                    placeholder="请选择"
                    style={{ width: 120 }}
                    onChange={handleChange}
                    allowClear
                    fieldNames={{ label: 'name', value: 'id' }}
                    options={states}
                  />
                </Form.Item>
              </div>
              <div className="topBottom">
                <Form.Item label="投诉类型" name="type">
                  <Select
                    placeholder="请选择"
                    style={{ width: 120 }}
                    onChange={handleChange}
                    allowClear
                    fieldNames={{ label: 'name', value: 'id' }}
                    options={types}
                  />
                </Form.Item>
                <Form.Item label="居民" name="userid">
                  <Input placeholder="请输入关键字" />
                </Form.Item>
                <div className="bottomRight">
                  <Button type="primary" htmlType="submit">
                    查询
                  </Button>
                </div>
              </div>
            </Form>
          </div>
          <div className="center">
            <Button type="primary" danger onClick={dell}>
              批量删除
            </Button>
          </div>
          <div className="table">
            <Table
              rowKey="id"
              bordered
              rowSelection={rowSelection}
              columns={columns}
              dataSource={list}
              pagination={false}
            />
          </div>
          <div className="page" style={{textAlign:'center',marginTop:'30px'}}>
            <Pagination
              total={total}
              onChange={ange}
              showSizeChanger
              showQuickJumper
              showTotal={total => `共 ${total} 条数据`}
            />
          </div>
        </Card>
      </div>
    </div>
  );
};
export default Repairs;
